<template>
    <div>
        <Toolbar>
            <n-button @click="save" type="primary">提交</n-button>
            <n-button tertiary @click="reset" type="info">重置</n-button>
        </Toolbar>

        <n-form ref="formRef" :model="appConfig" :rules="rules">
            <n-grid x-gap="8" :y-gap="8" cols="1 l:2" responsive="screen" mb-10>
                <n-gi>
                    <n-card title="系统设置">
                        <n-form-item label="站点名称" path="title">
                            <n-input v-model:value="appConfig.title" clearable />
                        </n-form-item>

                        <n-form-item label="前端地址" path="frontEndUrl">
                            <n-input v-model:value="appConfig.frontEndUrl" clearable />
                        </n-form-item>
                    </n-card>
                </n-gi>

                <n-gi>
                    <n-card title="OAuth设置">
                        <n-tabs type="line" animated mt-0 pt-0>
                            <n-tab-pane name="gitee" tab="Gitee">
                                <n-form-item label="Client Id">
                                    <n-input v-model:value="appConfig.giteeConfig.clientId" clearable />
                                </n-form-item>

                                <n-form-item label="Client Secret">
                                    <n-input v-model:value="appConfig.giteeConfig.clientSecret" clearable />
                                </n-form-item>

                                <n-form-item label="是否启用">
                                    <n-switch v-model:value="appConfig.giteeConfig.enabled" />
                                </n-form-item>
                            </n-tab-pane>

                            <n-tab-pane name="wechat open" tab="微信开放平台">
                                <n-form-item label="是否启用">
                                    <!-- <n-switch v-model:value="appConfig.wechatOpen.enabled" /> -->
                                </n-form-item>
                            </n-tab-pane>

                            <n-tab-pane name="wechat mp" tab="微信公众号"><n-form-item label="是否启用">
                                    <!-- <n-switch v-model:value="appConfig.wechatMp.enabled" />  -->
                                </n-form-item></n-tab-pane>
                        </n-tabs>
                    </n-card>
                </n-gi>
            </n-grid>
        </n-form>
    </div>
</template>

<script setup>
import { getAppConfig, saveAppConfig } from '@/apis/config';

const formRef = ref();

const appConfig = ref({
    title: "",
    frontEndUrl: "",
    giteeConfig: {
        clientId: "",
        clientSecret: "",
        redirectUri: ""
    }
});

const rules = {
    title: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入 站点名称",
    },
    frontEndUrl: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入 前端地址",
    },
};

async function save() {
    try {
        await formRef.value?.validate();
        await saveAppConfig(appConfig.value);
        $message.success("保存成功！");
    } catch (error) {
    }
}

async function reset() {
    const result = await getAppConfig();

    if (result.code === 0) {
        appConfig.value = result.content;
    }
}

reset();
</script>